<template>
    <view class="chat-container">
        <!-- <scroll-view class="chat-list" scroll-y :scroll-with-animation="true" :scroll-top="scrollTop"> -->
        <view v-for="(item, index) in chatList" :key="index" class="chat-item"
            :class="{ 'chat-item-right': item.isMe }">
            <!-- 头像 -->
            <image class="avatar" v-if="item.content" :src="item.isMe ? avalter : '/static/appLogo.jpeg'"
                mode="aspectFill" />

            <!-- 消息内容 -->
            <view class="message-content">
                <!-- 时间（居中显示） -->
                <text class="time" v-if="item.time">{{ item.time }}</text>

                <!-- 消息气泡（带小尖角） -->
                <view class="bubble " v-if="item.content"
                    :class="{ 'bubble-right': item.isMe, 'bg1': item.isMe, 'bg2': !item.isMe }">
                    <text class="message-text">{{ item.content }}</text>
                </view>
            </view>
        </view>
        <!-- </scroll-view> -->
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { feedbackHistoryDetail } from '@/api/apiList'

// 聊天数据
const chatList = ref([])

const getDetail = async (id) => {
    const res = await feedbackHistoryDetail({ id })
    if (res.code == 200) {
        chatList.value = [
            {
                isMe: true,
                id: res.data.id,
                content: res.data.feedbackNotes,
                time: res.data.feedbackTime
            },
            {
                isMe: false,
                id: res.data.id,
                content: res.data.reply,
                time: res.data.replyTimeFormat
            }
        ]
    }
}

let avalter = ref('')
const setForm = () => {
    let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
    avalter.value = userInfo.avatar
}

onLoad((option) => {
    getDetail(option.id)
    setForm()
})

// 滚动条位置
const scrollTop = ref(0)

// 格式化时间
const formatTime = (timestamp) => {
    const date = new Date(timestamp)
    const hours = date.getHours().toString().padStart(2, '0')
    const minutes = date.getMinutes().toString().padStart(2, '0')
    return `${hours}:${minutes}`
}

// 页面加载时滚动到底部
onMounted(() => {
    setTimeout(() => {
        scrollTop.value = 99999 // 设置一个足够大的值确保滚动到底部
    }, 100)
})
</script>

<style lang="scss" scoped>
.bg1 {
    background-color: #55936d !important;
    color: #fff !important;
}

.bg2 {
    background-color: #e2e5ea !important;
    color: #000 !important;
}

.chat-container {
    display: flex;
    flex-direction: column;
    padding: 40rpx 20rpx 20rpx 20rpx;
}

.chat-list {
    flex: 1;
    padding: 20rpx;
    box-sizing: border-box;
}

.chat-item {
    display: flex;
    margin-bottom: 40rpx;
    position: relative;

    &.chat-item-right {
        flex-direction: row-reverse;
    }
}

.avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin: 0 20rpx;
    margin-top: 45rpx;
}

.message-content {
    flex: 1;
    max-width: 70%;
    display: flex;
    flex-direction: column;
    margin-top: 35rpx;

    .chat-item-right & {
        align-items: flex-end;
    }
}

.time {
    font-size: 24rpx;
    color: #999;
    text-align: center;
    margin-bottom: 10rpx;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%, -50%);

}

.bubble {
    position: relative;
    padding: 16rpx 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    word-break: break-word;
    max-width: 100%;

    /* 左侧气泡小尖角 */
    // &::before {
    //     content: '';
    //     position: absolute;
    //     left: -16rpx;
    //     top: 20rpx;
    //     width: 0;
    //     height: 0;
    //     border: 8px solid transparent;
    //     border-right-color: #fff;
    //     border-left-width: 0;
    // }

    /* 右侧气泡小尖角 */
    // &-right {
    //     background-color: #55946d;
    //     color: #fff;

    //     &::before {
    //         left: auto;
    //         right: -16rpx;
    //         border-left-color: #55946d;
    //         border-right-width: 0;
    //     }
    // }
}

.message-text {
    font-size: 28rpx;
    line-height: 1.5;
}

.bubble {
    max-width: 70%;
    padding: 10px 15px;
    margin: 10px 0;
    position: relative;
}

/* 右气泡 */
.bubble-right {
    margin-left: auto;
    /* 关键属性：右对齐 */
    background: #649170;
    color: white;
}

.bubble-right::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 10px;
    border: 8px solid transparent;
    border-left-color: #649170;
    /* 与背景色一致 */
}

/* 左气泡 */
.bg2 {
    margin-right: auto;
    /* 关键属性：左对齐 */
    background: #e3e5e9;
    color: #333;
}

.bg2::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 10px;
    border: 8px solid transparent;
    border-right-color: #e3e5e9;
    /* 与背景色一致 */
}
</style>
